<template>
  <view>
    <view class="margin radius-lg solid shadow bg-gradual-blue">
      <view class="cu-bar margin-lr-xs margin-top-sm grid col-4 no-border radius-lg-top">
        <view class="action">
          <text class="text-xl text-bold">历史预约</text>
        </view>
        <view class="action">
          <navigator url="/pages/patient/appointment/records/list">
            <view class="text-lg">
              <text>全部预约</text>
              <text class="cuIcon-right"></text>
            </view>
          </navigator>
        </view>
      </view>
      <view class="cu-list grid col-4 no-border text-black  padding-bottom radius-lg-bottom">
        <view class="cu-item" v-for="(item,index) in appointmentMenu" :key="index">
          <navigator :url="item.url">
            <view class="text-shadow text-df" :class="'cuIcon-'+item.icon +' text-'+item.icon">
              <view class="cu-tag badge" v-if="item.badge!==0">
                <block>{{ item.badge }}</block>
              </view>
            </view>
            <text>{{ item.label }}</text>
          </navigator>
        </view>
      </view>
    </view>

    <view class="cu-list margin padding-xs menu radius-lg  solid shadow bg-white">
      <view v-if="patientInfo" class="cu-item">
        <view class="content">
          <text class="cuIcon-card text-grey"></text>
          <text class="text-black">ID</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">{{ patientInfo?.patientNum }}</text>
        </view>
      </view>
      <view v-if="patientInfo" class="cu-item arrow" @click="updateInfo">
        <view class="content">
          <text class="cuIcon-writefill text-grey"></text>
          <text class="text-black">资料编辑</text>
        </view>
      </view>
      <view v-if="patientInfo" class="cu-item arrow" @click="archiveDetail">
        <view class="content">
          <text class="cuIcon-tagfill text-grey"></text>
          <text class="text-black">健康档案</text>
        </view>
      </view>
    </view>

  </view>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import api from '@/api'
import {onHide, onShow} from "@dcloudio/uni-app";

const patientInfo = ref()

onShow(() => {
  api.patient.info().then((res: any) => {
    if (res && res.data.data) {
      patientInfo.value = res.data.data
      getAppointment()
    }
  })
})
onHide(() => {
  appointmentMenu.value.forEach(tmp => {
    tmp.badge = 0
  })
})
const getAppointment = () => {
  api.appointment.list({
    pageNo: 1,
    pageSize: 9999,
    orParams: '{}',
    andParams: JSON.stringify({
      patientUsername: patientInfo.value.username
    }),
    orderParams: '{}',
  }).then(res => {
    if (res && res.data.code === 0) {
      let tmp = res.data.data.records
      tmp.forEach((t: { status: number; }) => {
        let id = t.status - 1
        if (id < 3) {
          appointmentMenu.value.at(id)['badge']++
        }
      })
    }
  })
}

const appointmentMenu = ref([
  {
    url: '/pages/patient/appointment/records/list?e=1',
    icon: 'activity',
    label: '已预约',
    badge: 0,
    color: 'red'
  },
  {
    url: '/pages/patient/appointment/records/list?e=2',
    icon: 'all',
    label: '进行中',
    badge: 0,
    color: 'red'
  },
  {
    url: '/pages/patient/appointment/records/list?e=3',
    icon: 'mark',
    label: '待回访',
    badge: 0,
    color: 'red'
  },
  {
    url: '/pages/patient/appointment/records/list?e=4',
    icon: 'squarecheck',
    label: '已完成',
    badge: 0,
    color: 'red'
  }
])

const updateInfo = () => {
  uni.navigateTo({
    url: '/pages/patient/info/update'
  })
}
const appointmentRecords = () => {
  uni.navigateTo({
    url: '/pages/patient/appointment/records/list'
  })
}
const archiveDetail = () => {
  uni.navigateTo({
    url: '/pages/common/archive/index'
  })
}
</script>
<style scoped>


.tui-item-box {
  width: 100%;
  display: flex;
  align-items: center;
}

.tui-list-cell_name {
  padding-left: 20 rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}


.tui-right {
  margin-left: auto;
  margin-right: 34 rpx;
  font-size: 26 rpx;
  color: #999;
}


</style>
